import { getElement, getScale } from "./ecgPublic";

export default function () {

  let ctx = null
  const clearRubbish = 10

  // 画背景红线
  const draw = async (params) => {
    const { element, gridScale = 1, lineWidth = 1, ppm = 4, dpr = getScale(true), smallLineColor = 'rgba(255,221,221,1)', bigLineColor = "rgba(255,175,175,1)", supBigLineColor = 'rgba(255,140,140,1)' } = params
    let canvasElement = await getElement(element)
    const canvas = canvasElement?.node
    if (!canvas) return
    ctx = canvas.getContext('2d')
    if (!ctx) {
      uni.showToast({
        title: '当前设备不支持绘制波形图',
        icon: 'none',
      })
      return false
    }
    const width = canvasElement.width
    const height = canvasElement.height
    ctx.beginPath()
    ctx.clearRect(
      0 - clearRubbish,
      0 - clearRubbish,
      width + clearRubbish,
      height + clearRubbish,
    )
    ctx.stroke()

    canvas.width = width * dpr
    canvas.height = height * dpr
    ctx.scale(dpr, dpr)



    drawSmallGrid({
      ctx,
      width,
      height,
      ppm: ppm * gridScale,
      lineWidth,
      smallLineColor
    })
    drawBigGrid({
      ctx,
      width,
      height,
      ppm: ppm * gridScale,
      lineWidth,
      bigLineColor
    })
    drawSupBigGrid({
      ctx,
      width,
      height,
      ppm: ppm * gridScale,
      lineWidth,
      supBigLineColor
    })
  }

  // 画小表格
  const drawSmallGrid = (params) => {
    const { ctx, width, height, ppm, lineWidth, smallLineColor } = params
    //线条粗细
    ctx.lineWidth = lineWidth
    ctx.beginPath()
    //设置线条颜色
    ctx.strokeStyle = smallLineColor
    //循环一下，初始值为0，宽度为画布的宽度，每次走5个像素
    for (let x = 0; x <= width; x += ppm) {
      //每次从新定位一下从哪里开始画，x轴每次变化y轴始终是0
      ctx.moveTo(x, 0)
      //每次画整个画布高的线
      ctx.lineTo(x, height)
    }
    //横线同理
    for (let y = 0; y <= height; y += ppm) {
      ctx.moveTo(0, y)
      ctx.lineTo(width, y)
    }
    ctx.stroke()
  }

  //大的表格和小的是同样原理
  const drawBigGrid = (params) => {
    const { ctx, width, height, ppm, lineWidth, bigLineColor } = params
    ctx.lineWidth = lineWidth
    ctx.beginPath()
    ctx.strokeStyle = bigLineColor
    //唯一不一样的就是颜色和间隔
    for (let x = 0; x <= width; x += ppm * 5) {
      if (x === 0) {
        ctx.moveTo(lineWidth / 4, 0)
        ctx.lineTo(x, height)
      } else {
        ctx.moveTo(x, 0)
        ctx.lineTo(x, height)
      }
    }
    for (let y = 0; y <= height; y += ppm * 5) {
      if (y === 0) {
        ctx.moveTo(0, lineWidth / 4)
        ctx.lineTo(width, y)
      } else {
        ctx.moveTo(0, y)
        ctx.lineTo(width, y)
      }
    }
    ctx.stroke()
  }

  //大的表格和小的是同样原理
  const drawSupBigGrid = (params) => {
    const { ctx, width, height, ppm, lineWidth, supBigLineColor } = params
    ctx.lineWidth = lineWidth
    ctx.beginPath()
    ctx.strokeStyle = supBigLineColor
    //唯一不一样的就是颜色和间隔

    for (let x = ppm * 5; x <= width; x += ppm * 25) {
      ctx.moveTo(x, 0)
      ctx.lineTo(x, height)
    }
    ctx.stroke()
  }

  return {
    draw
  }
}
